<template>
  <div class="all_monthconsumption">
    <card>
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-r">
          <span>{{ nowYear }}年</span>
          <p @click="showTime" class="time">{{ nowMonth }}月
            <i class="arrow"></i>
          </p>
          <!-- 需要引入 datetime标签-->
          <datetime style="display: none;"></datetime>
        </div>
        <div>
          <span>开桌（次）</span>
          <p>{{sumKz}}</p>
        </div>
        <div>
          <span>消耗房卡（张）</span>
          <p>{{sumXh}}</p>
        </div>
      </div>
    </card>
    <group class="list_box">
      <cell :title="monthconsumption.title" :value="monthconsumption.value" :is-link="monthconsumption.linkShow" :link="monthconsumption.href" v-for="monthconsumption in monthconsumptionlist" v-bind:key="monthconsumption.day"></cell>
    </group>
  </div>
</template>

<script>
import { Group, Cell, Card, Datetime } from "vux";
import { add0 } from "../../../scripts/utils";
export default {
  data() {
    return {
      clubId: null, //亲友圈id
      monthconsumptionlist: [], //累计数据
      nowdate: "", //当前年月
      nowYear: "", //当前年
      nowMonth: "", //当前月
      endDate: "" //用于时间插件中的结束时间[当天不变]
    };
  },
  computed: {
    //定义一个计算属性用来处理数据
    sumKz: function() {
      return this.monthconsumptionlist.reduce(function(sum, d) {
        return sum + d.createcount;
      }, 0);
    },
    sumXh: function() {
      return this.monthconsumptionlist.reduce(function(sum, d) {
        return sum + d.consumedcard;
      }, 0);
    }
  },
  components: {
    Card,
    Datetime,
    Group,
    Cell
  },
  created() {
    //获取当前时间
    let date = new Date();
    this.nowYear = date.getFullYear();
    this.nowMonth = add0(date.getMonth() + 1);
    this.nowdate = this.nowYear + "-" + this.nowMonth;
    this.endDate = this.nowYear + "-" + this.nowMonth + "-01";
    //初始化数据
    if (this.$route.query.clubId) {
      this.clubId = this.$route.query.clubId;
      this.getData(this.nowdate, this.clubId);
    }
  },
  methods: {
    getData(date, clubId) {
      this.apiService.club
        .monthconsumptionlist({
          date: date,
          clubid: clubId
        })
        .then(res => {
          this.monthconsumptionlist = res.data.monthconsumptionlist;
          this.monthconsumptionlist.forEach(d => {
            let date = new Date(parseInt(d.datetimestamp) * 1000);
            let WEEK = [
              "星期日",
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六"
            ];
            d.title = add0(date.getDate()) + "日—" + WEEK[date.getDay()];
            d.value = "开桌：" + d.createcount + " 消耗房卡：" + d.consumedcard;
            if (d.isshow == 1) {
              d.linkShow = true;
              d.href =
                "todayData?clubId=" +
                this.clubId +
                "&date=" +
                this.nowdate +
                "-" +
                add0(date.getDate());
            } else {
              d.linkShow = false;
            }
          });
        })
        .catch(() => {
          this.monthconsumptionlist = [];
        });
    },
    showTime() {
      let _this = this;
      this.$vux.datetime.show({
        cancelText: "取消",
        confirmText: "确定",
        format: "YYYY-MM",
        startDate: "2016-01-01", //格式必须为 YYYY-MM-DD
        endDate: this.endDate,
        value: this.nowdate,
        onConfirm(val) {
          _this.nowYear = val.split("-")[0];
          _this.nowMonth = val.split("-")[1];
          _this.nowdate = val;
          _this.getData(val, _this.clubId);
        }
      });
    }
  }
};
</script>

<style scoped>
.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  position: relative;
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: rgb(85, 85, 85);
  margin: 10px;
  font-size: 0.25rem;
}
.card-demo-flex p {
  font-size: 0.3rem;
  margin-top: 0.25rem;
}
.vux-1px-r:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 3px solid #c7c7c7;
  color: #c7c7c7;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}
.card-demo-flex .vux-1px-r {
  flex: 0.7;
}
.weui-panel__bd .time {
  font-size: 0.35rem;
  font-weight: 600;
}
.list_box {
  overflow: auto;
  height: 65vh;
}
.list_box .weui-cell {
  font-size: 15px;
}

/*三角的共用样式*/
.arrow {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 0.12rem;
  bottom: 0.12rem;
  left: 70%;
  border-bottom-width: 0;
  border-top-color: #000;
}
</style>
<style>
.list_box .weui-cell .weui-cell__ft {
  color: #000;
}
</style>


